<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useAudioStore } from '@/stores/audioStore'
import { useCookieStore } from '@/stores/cookieStore'
import { useUserInfoStore } from '@/stores/userInfoStore'
import ListCard from '@/components/ListCard/ListCard.vue'
import { ElMessage } from 'element-plus'
import bus from '@/utils/bus.js'
import {
  getPlayListDetailAPi,
  getPlayListDetailDynamicAPi,
  isCollectSongListAPi,
  getUserPlayListAllAPi
} from '@/apis/song.js'


const useAudio = useAudioStore()
const useCookie = useCookieStore()
const useUserInfo = useUserInfoStore()
const route = useRoute()

// 歌单的详细信息
const playListDetail = ref([])
// 歌单的详细动态（如评论数,是否收藏,播放数）
const playListDynamic = ref([])
onMounted(async () => {
  useAudio.getAllPlayList(route.params.id)
  const { data } = await getPlayListDetailAPi(route.params.id)
  playListDetail.value = data.playlist
  const dynamicRes = await getPlayListDetailDynamicAPi(route.params.id)
  playListDynamic.value = dynamicRes.data
})

// 播放全部歌曲
const playAllSong = () => {
  useAudio.activeSongList = useAudio.allSongList
  useAudio.playIndex = 0
  useAudio.playSong()
}

// 收藏歌单
const collectSongList = async () => {
  if (!useCookie.cookie.cookie) {
    return ElMessage({
      duration: 5000,
      message: '收藏失败，请保持登录状态。',
      type: 'warning',
    })
  }
  const { data } = await isCollectSongListAPi(route.params.id, 1)
  if (data.code === 200) {
    playListDynamic.value.subscribed = true
    ElMessage({
      message: '收藏成功',
      type: 'success'
    })
  }
}

// 取消收藏歌单
const cancelColectSongList = async () => {
  const { data } = await isCollectSongListAPi(route.params.id, 2)
  if (data.code === 200) {
    playListDynamic.value.subscribed = false
    ElMessage({
      message: '取消收藏成功',
      type: 'success'
    })
  }
}


// 触底加载
const isLoad = ref(false)
const loadSongList = async () => {
  isLoad.value = true
  bus.emit('changeIsLoading', true)
  const { data } = await getUserPlayListAllAPi(route.params.id, 30, useAudio.allSongList.length)
  isLoad.value = false
  bus.emit('changeIsLoading', false)
  if (!data.songs.length) {
    isLoad.value = true
    return ElMessage('到底啦')
  }
  useAudio.allSongList.push(...data.songs)
  useAudio.privileges.push(...data.privileges)
}

// 判断该歌单是否为自己创建
const isMy = computed(() => playListDetail.value.creator?.userId === useUserInfo.userInfo.profile?.userId)
</script>

<template>
  <div class="songList">
    <div class="song-list-info">
      <div class="list-info">
        <img :src="playListDetail.coverImgUrl + '?param=200y200'" alt="">
        <div class="info">
          <h1>{{ playListDetail.name }}</h1>
          <div class="creator">
            <img :src="playListDetail.creator?.avatarUrl + '?param=200y200'" alt="">
            {{ playListDetail.creator?.nickname }}
          </div>
          <div class="description">
            {{ playListDetail.description }}
          </div>
        </div>
      </div>
      <div class="button">
        <el-button @click="playAllSong">全部播放</el-button>
        <el-button v-if="isMy || playListDynamic.subscribed" @click="cancelColectSongList"
          :disabled="isMy">已收藏</el-button>
        <el-button v-else @click="collectSongList">收藏</el-button>
      </div>
    </div>
    <!-- 触底加载 -->
    <ul v-infinite-scroll="loadSongList" :infinite-scroll-immediate="false" :infinite-scroll-delay="500"
      :infinite-scroll-disabled="isLoad">
      <ListCard :song="item" :index="index" :isMy="isMy" :privilege="useAudio.privileges[index]" v-for="(item, index) in useAudio.allSongList" :key="item.id" />
    </ul>
    <!-- / 触底加载 -->
    <p class="bottom" v-show="isLoad">———————— 到底啦 ————————</p>
  </div>
</template>

<style scoped lang='scss'>
.songList {
  max-width: 1165px;
  margin: 0 auto;

  .song-list-info {
    margin-top: 5px;
    height: 180px;
    display: flex;
    justify-content: space-between;

    .list-info {
      display: flex;

      img {
        height: 150px;
        width: 150px;
      }

      .info {
        margin-left: 20px;

        h1 {
          height: 40px;
          color: $primaryText;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .creator {
          height: 46px;
          display: flex;
          align-items: center;
          color: $assistText;

          img {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            margin-right: 10px;
          }
        }

        .description {
          margin-right: 20px;
          height: 70px;
          overflow: hidden;
          white-space: pre-wrap;
          color: $assistText;
          line-height: 22px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
      }

    }

    .button {
      display: flex;
      align-items: end;
      margin-bottom: 30px;

      button {
        width: 90px;
        height: 35px;
        color: #fff;

        &:first-child {
          background-color: $primaryColor;
        }

        &:last-child {
          background-color: $sucColor;
        }
      }
    }
  }

  .bottom {
    text-align: center;
    line-height: 70px;
    color: #aaa;
    transition: all 0.5s linear;
  }
}
</style>
